<template>
  <div class="type-area">
    <problem-set :table-data="tableData"></problem-set>
  </div>
</template>

<script>
import ProblemSet from "@/components/ProblemSet";

import {getProblemSet} from "@/network/home";

export default {
  name: "Home",
  components: {
    ProblemSet
  },
  data() {
    return {
      tableData: []
    }
  },
  created() {
    getProblemSet().then(res => {
      for(let i = 0;i < res.data.length;i++) {
        let problem = {};
        problem.status="-";
        problem.id=res.data[i].id;
        problem.name=res.data[i].name;
        problem.difficulty=res.data[i].difficulty;
        problem.pass=res.data[i].pass;
        this.tableData.push(problem);
      }
      // let problem = {};
      // problem.status="-";
      // problem.no=0;
      // problem.name='test';
      // problem.difficulty='test';
      // problem.pass=100;
      // this.tableData.push(problem);
    }).catch(err => {
      // console(err);
    })
  }
}
</script>

<style scoped>
  .type-area {
    padding: 0 120px;
  }
</style>